<template>
	<view class="login-container">
		<view class="login-container-top flex-x-start">
			<img class="login-icon" src="@/static/image/login/icon.png">
			<div class="title">uniapp</div>
		</view>
		<view class="login-box">
			<view class="row" @click="openPicker">
				<u-input type="text" v-model="roleType" placeholder="角色" color="#FFFFFF" disabled :customStyle="{backgroundColor: 'rgba(243,245,247,0.1)',borderRadius: '12rpx'}" style="pointer-events: none;" border="false">
					<template slot="prefix" class="flex-y-center mr10r">
						<img class="pre-icon" src="@/static/image/login/role.png">
					</template>
					<template slot="suffix" class="flex-y-center mr10r">
						<u-icon v-if="rolePicker.show" name="arrow-up" color="#ffffff"></u-icon>
						<u-icon v-else name="arrow-down" color="#ffffff"></u-icon>
					</template>
				</u-input>
			</view>
			<view class="row">
				<u-input v-model="phoneNumber" type="number"  placeholder="手机号" color="#FFFFFF" :customStyle="{backgroundColor: 'rgba(243,245,247,0.1)',borderRadius: '12rpx'}" border="false">
					<template slot="prefix" class="flex-y-center mr10r">
						<img class="pre-icon" src="@/static/image/login/phone.png">
					</template>
				</u-input>
			</view>
			<view class="row">
				<div class="flex-x-start">
					<u-input v-model="code" type="number" placeholder="验证码" color="#FFFFFF" :customStyle="{backgroundColor: 'rgba(243,245,247,0.1)',borderRadius:'12rpx'}" border="false">
						<template slot="prefix" class="flex-y-center mr10r">
							<img class="pre-icon" src="@/static/image/login/code.png">
						</template>
						<template slot="suffix" class="mr10r">
							<u-code ref="uCode" seconds="60"  change-text="X秒重新获取" @change="codeChange"></u-code>
							<u--text @tap="verifyToGetCode" type="primary" :text="codeTips" size="mini"></u--text>
						</template>
					</u-input>
				</div>
			</view>
			<button type="default" class="login-container-button" @click="login" :disabled="loading">{{loading ? "登录中...":" 登录 "}}</button>
		</view>
		<!--维保类型-->
		<u-picker class="hpicker" itemHeight="85" :show="rolePicker.show" :columns="rolePicker.columns" keyName="label" @confirm="pickerConfirm" @cancel="pickerClose()" @close="pickerClose()" closeOnClickOverlay></u-picker>
		<!--图像验证-->
		<h-img-verify @result='verifyResult' ref="imgVerify"/>
	</view>
</template>

<script>
import { login, maintenancePersonLogin, safetyPersonLogin, getCaptcha, getMaintenanceUserInfo, getSafetyUserInfo} from '@/api/index.js'
// import VConsole from 'vconsole'
import hImgVerify from "@/components/h-img-verify/h-img-verify.vue";
	export default {
        components:{
            "h-img-verify":hImgVerify
		},
		data: () => {
			return {
				loading: false,
				showPassword: false,//是否显示密码
                //角色
                roleType:'维保人员',
                roleId:'1',
                rolePicker:{
                    show: false,
                    columns:[[{id: '1', label: '维保人员'},{id: '2', label: '安全员'}]]
                },
				//验证码登录
                phoneNumber:'',
                code: '',
                maintenanceSmsId:'',
                codeTips:'',
				//图像验证
                showVerify: false
			}
		},
		created(){
            uni.hideKeyboard()
		},
        async onShow() {
		    let _ = this
			// const vConsole = new VConsole()
		},
		methods: {
            codeChange(text) {
                console.log('codeChange',text)
                this.codeTips = text;
            },
            async getCode() {
                let _ = this
                if (!this.$refs.uCode.canGetCode)  return
				let data = {
                    phone: _.phoneNumber,
                    loginType: _.roleId
				}
                const { data: res } = await getCaptcha(data)
				if(res.code==200){
                    uni.$u.toast('验证码已发送')
					// _.code = res.data.code || ''
					_.maintenanceSmsId = res.data.maintenanceSmsId || ''
                    _.$refs.uCode.start()
				}else {
                    uni.$u.toast(res.msg)
				}
            },
            /** 图像验证*/
            verifyResult(){
                let _ = this
                _.showVerify = false
                _.getCode()
            },
            //图像验证后去发短信
            verifyToGetCode(){
                let _ = this
                if(_.$V.isEmpty(_.roleId)) return uni.$u.toast('请先选择角色！')
                if(_.$V.isEmpty(_.phoneNumber)) return uni.$u.toast('请先输入手机号！')
                if (!this.$refs.uCode.canGetCode)  return
                _.$refs.imgVerify.show();
            },

            validation(){
                let _ = this
                if (_.$V.isEmpty(_.roleId)) {
                    this.$T.showToast('请选择角色')
                    return false
                }
                if (_.$V.isEmpty(_.phoneNumber)) {
                    this.$T.showToast('请输入手机号')
                    return false
                }
                if (_.$V.isEmpty(_.code)) {
                    this.$T.showToast('请输入验证码')
                    return false
                }
                return true
            },
			//登录
			async login() {
                let _ = this
                if (!_.validation()) return
                _.loading = true
                let data = {
                    phone: _.phoneNumber,
                    code: _.code,
                    maintenanceSmsId: _.maintenanceSmsId
                }
                if (_.roleType == '维保人员') {
                    try {
                        const {data: res} = await maintenancePersonLogin(data)
                        if (res.code == 200) {
                            _.$u.vuex('token', res.data.token)
                            _.$u.vuex('role', 'maintenance')//角色为维保人员
                            uni.setStorageSync('Authorization', res.data.token)
                            const {data: res2} = await getMaintenanceUserInfo()
                            _.$u.vuex('userInfo', res2.data.maintenanceStaffLoginInfoVO || {})
                            uni.reLaunch({url: '/pages_sub1/home/index'})
                            _.loading = false
                        } else {
                            _.$T.showToast(res.msg)
                            _.loading = false
                        }
                    } catch (e) {
                        _.loading = false
                    }
                } else {//安全员
                    try {
                        const {data: res} = await safetyPersonLogin(data)
                        if (res.code == 200) {
                            _.$u.vuex('token', res.data.token)
                            _.$u.vuex('role', 'safety')//角色为安全员
                            uni.setStorageSync('Authorization', res.data.token)
                            const {data: res2} = await getSafetyUserInfo()
                            _.$u.vuex('userInfo', res2.data || {})
                            uni.reLaunch({url: '/pages_sub2/safetyHome/index'})
                            _.loading = false
                        } else {
                            _.$T.showToast(res.msg)
                            _.loading = false
                        }
                    } catch (e) {
                        _.loading = false
                    }
                }
			},
			/** 选择器*/
            openPicker(){
                let _ = this
				console.log('openPicker')
               	_.rolePicker.show = true
            },
            //维保类型
            pickerConfirm(val){
                let _ = this
                _.roleId = val.value[0].id
                _.roleType = val.value[0].label
                _.rolePicker.show = false
            },
            pickerClose(){
                let _ = this
                _.rolePicker.show = false
            },
		}
	}
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>
